<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            通过具体的元素节点调用
            1.getElemntsByTagName()
            -方法，返回当前节点的指定标签名后代节点
            2.chiildNodes
            -属性，表示当前节点的所有子节点
            3.firstCHILD
            -属性，表示当前节点的第一个人子节点
            4.lastChild
            -属性，表示当前节点的最后一个子节点
        */
        window.onload=function(){
              //为btn04绑定一个单击响应函数
            var btn04=document.getElementById("btn04");
            btn04.onclick=function(){
                var city=document.getElementById("city");
                var lis=city.getElementsByTagName("li");
                for(var i=0;i<lis.length;i++){
                    alert(lis[i].innerHTML);
                }
            };
            //为btn05绑定一个单击响应函数
            var btn05=document.getElementById("btn05");
            btn05.i=onclick=function(){
                //获取id为city的节点
                var city=document.getElementById("city");
                //返回city的所有子节点
                /* 
                    childNodes属性会获取包括文本节点在内的所有节点
                    根据DOM标签标签间的空白也会被当成文本节点
                    注意：在IE8以下的浏览器，将不会将空白文本当成子节点
                */
                // var cns=city.childNodes;
                // alert(cns.length);
                var cns2=city.children;
                alert(cns2.length);
            };
             var btn06=document.getElementById("btn06");
             btn06.onclick=function(){
                 var phone=document.getElementById("city");
                 //返回city的第一个子节点
                //  phone.childNodes[0];
                 //firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
                 var fir=phone.firstChild;
                 //firstElementChild获取到当前元素的第一个子元素
                /* firstElementChild不支持IE8及以下浏览器
                如果需要兼容尽量不要使用

                */
               fir=phone.firstElementChild;
                 alert(fir);
             }
        }

    </script>
</head>
<body>
    <div id="total">
        <div class="inner">
            <button id="btn01">点一下btn01</button>
            <button id="btn02">点一下btn02</button>
            <button id="btn04">点一下btn04</button>
            <button id="btn05">点一下btn05</button>
            <button id="btn06">点一下btn06</button>

            <p>你喜欢哪个城市？</p>
            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>武汉</li>
                <li>丹东</li>
                <li>深圳</li>
            </ul>
        </div>
 
        <div class="inner">
         <button id="btn03">点一下btn03</button>
            gender:
            <input   class="hello"  type="radio" name="gender" value="male">
            Male
            <input class="hello" type="radio" name="gender" value="female">
            Female
            <br>
            <br>
            name:
            <input class="hello" type="text"   name="name"  id="username"  value="=abcde">
        </div>
    </div>
</body>
</html>